<template>
  <div>
    <div>

      <!-- 头部 -->
      <header class="flexbox spacebetween">
        <div class="menu-switch" @click="navShow = true"><p><img src="../assets/images/infoBtn.gif" alt=""></p></div>
        <p class="head-title text-center">{{title}}</p>
        <div class="game-close" v-if="(!isGame && (nowother == -1))" @click="closeGameFun"><p><img src="../assets/images/quit.png" alt=""></p></div>
        <div class="game-home" v-if="(isGame || (nowother != -1))" @click="isGame = false;nowother = -1;title='游戏大厅';"><p><img src="../assets/images/home.png" alt=""></p></div>
      </header>

      <!-- 内容 -->
      <div class="maincontent" v-if="nowother == -1">
        <!-- 游戏大厅 -->
        <!-- <GameHome @gameName="getGameFun" v-if="!isGame" /> -->
        <div v-if="!isGame">
          <grid :cols="3" :show-lr-borders="false" :show-vertical-dividers="false">
              <grid-item v-for="(item,index) in gridList" :key="index" link="" :label="item.name" @click.native="gotogameFun(item.name)">
                  <img slot="icon" :src="item.icon">
              </grid-item>
          </grid>
        </div>
        <!-- 票种 -->
        <Gamemain :gameName="gamename" @betrecord="betrecordFun" @openBet="openBetFun" @getTit="getTitFun" v-if="isGame" />
      </div>
      <!-- 其他模块 -->
      <div class="maincontent" v-if="nowother != -1">
        <!-- 即时注单 -->
        <NoteList @getTit="getTitFun" v-if="nowother == 0" />
        <!-- 下注历史 -->
        <BetHistory @getTit="getTitFun" v-if="nowother == 1" />
        <!-- 开奖结果 -->
        <LotteryResults @getTit="getTitFun" v-if="nowother == 2" />
        <!-- 个人资讯 -->
        <Information @getTit="getTitFun" v-if="nowother == 3" />
        <!-- 路珠 -->
        <LuZhu @getTit="getTitFun" v-if="nowother == 4" />
        <!-- 游戏规则 -->
        <GameRules @getTit="getTitFun" v-if="nowother == 5" />
        <!-- 消息中心 -->
        <News @getTit="getTitFun" v-if="nowother == 6" />
        <!-- 财务管理 -->
        <FinancialManagement @getTit="getTitFun" v-if="(nowother == 7 && isManagement)" />
        <!-- 修改密码 -->
        <ChangePassword @getTit="getTitFun" v-if="(nowother == 8 && isManagement) || (nowother == 7 && !isManagement)" />
      </div>

      <!-- 底部 -->
      <footer class="flexbox spacebetween">
        <p>{{userMoney}}</p>
        <p>今日输赢：{{daytotal}}</p>
      </footer>
      
    </div>
    <!-- 侧边栏 -->
    <div>
      <popup v-model="navShow" position="left" class="menu-left-box">
        <div class="menu-main-box">
          <h4 class="menu-tit-box text-center"><img src="../assets/images/head.png" class="menu-tit-pic">个人中心</h4>
          <group class="menu-list-box">
            <cell v-for="(item,index) in menuList" :key="index" :title="item" @click.native="otherFun(index)" is-link class="menu-cell-link"></cell>
          </group>

        </div>
      </popup>
    </div>
    <!-- 系统对话 -->
    <x-dialog class="dialog-demo" v-model="isShow">
        <div style="position: relative;">
            <p class="vux-close" style="position: absolute;right: 15px;top: 10px;" @click="closeFun"></p>
            <h3 class="dialogTitle">系统消息</h3>
            <div style="padding: 0px 25px;">
              <p style="text-align: left;padding: 5px 0px 10px 0px;font-weight: bold;">管理员对您说：</p>
              <p style="text-indent: 30px;text-align: left;line-height: 1.5em;">{{dataInfo.chat}}</p>
              <div class="flexbox spacebetween" style="padding: 15px 0px 20px;">
                <input type="text" style="padding: 4px 3px;border-radius: 5px;border: 1px solid #dcdcdc;"  v-model="content" />
                <input type="button" class="signBtn" value="发送" @click="sendFun" />
              </div>
            </div>
            
        </div>
    </x-dialog>

  </div>
</template>

<script>

var timer = null;
var timers = null;
var daytime = null;
import {  Popup, Group, Cell, XSwitch, XDialog, Grid, GridItem } from 'vux'

export default {
  components: {
    Popup,
    Group,
    Cell,
    XSwitch,
    XDialog,
    Grid,
    GridItem,
  },
  data () {
    return {
      navShow: false,  //侧边导航是否显示
      menuList: ['即时注单','下注历史','开奖结果','个人资讯','路珠','游戏规则','消息中心','财务管理','修改密码','安全退出'],  //侧边导航目录
      isGame: false,  //
      gamename: '',  //当前游戏
      nowother: -1,  //其他模块
      userMoney: '',  // 可用额度
      isManagement: false, //是否有财务管理项
      authData: {},  //账户信息
      isShow: false,  //是否对话
      dataInfo: {},
      content: '',
      settime: false,
      title: '游戏大厅',  //当前标题
      daytotal: 0,  //今日输赢
      gridList: [],
      // gridList: [
      //   {name: 'PC蛋蛋',icon: require('@/assets/images/pcdd.png'),path: ''},
      //   {name: '六合彩',icon: require('@/assets/images/lhc.png'),path: ''},
      //   {name: '北京PK拾',icon: require('@/assets/images/bjpks.png'),path: ''},
      //   {name: '北京快乐8',icon: require('@/assets/images/bjkl8.png'),path: ''},
      //   {name: '天津时时彩',icon: require('@/assets/images/tjssc.png'),path: ''},
      //   {name: '安徽快3',icon: require('@/assets/images/ahk3.png'),path: ''},
      //   {name: '山东11选5',icon: require('@/assets/images/sdsyxw.png'),path: ''},
      //   {name: '幸运飞艇',icon: require('@/assets/images/xyft.png'),path: ''},
      //   {name: '广东11选5',icon: require('@/assets/images/gdsyxw.png'),path: ''},
      //   {name: '广东快乐十分',icon: require('@/assets/images/gdklsf.png'),path: ''},
      //   {name: '新疆时时彩',icon: require('@/assets/images/xjssc.png'),path: ''},
      //   {name: '江苏快3',icon: require('@/assets/images/jsk3.png'),path: ''},
      //   {name: '江西11选5',icon: require('@/assets/images/jxsyxw.png'),path: ''},
      //   {name: '重庆幸运农场',icon: require('@/assets/images/cqxync.png'),path: ''},
      //   {name: '重庆时时彩',icon: require('@/assets/images/cqssc.png'),path: ''},
      //   {name: '吉林快3',icon: require('@/assets/images/jsk3.png'),path: ''},
      // ],
    }
  },
  methods: {
    getGameFun(name){
      // console.log('当前game为',name);
      this.gamename = name;
      this.isGame = true;
    },
    gotogameFun(name){
      this.gamename = name;
      this.isGame = true;
    },
    otherFun(ind){
      this.nowother = ind;
      this.navShow = false;
      if((this.isManagement && (this.nowother == 9)) || (!this.isManagement && (this.nowother == 8))){
        
        this.closeGameFun();

      }
    },
    //接收子组件的查看投注明细指令
    betrecordFun(){
      this.nowother = 0;
    },
    init(){

      var _this = this;

      if(window.localStorage.Authorizations){
        //余额
        _this.$httpGet('/api/auth').then(response => {
          
          if(response.status == 200){
            
            var gameArr = [];
            for(var i in response.data.games){
              if(response.data.games[i]){
                _this.gridList.push({'name': i, 'icon': '/static/img/game/' + i + '.png'});
                gameArr.push(i);
              }
            }
            //一级菜单
            window.localStorage.gameList = gameArr.toString();

            _this.authData = response.data;
            //是否有财务管理
            if(response.data.deal_type[0] == 1){  //现金

              _this.userMoney = '现金余额：' + response.data.cash.current.toFixed(2);
              _this.isManagement = true;
              _this.menuList = ['即时注单','下注历史','开奖结果','个人资讯','路珠','游戏规则','消息中心','财务管理','修改密码','安全退出'];
              

            }else if(response.data.deal_type[0] == 2){  //信用

              _this.userMoney = '信用余额：' + response.data.quick.current.toFixed(2);
              _this.isManagement = false;
              _this.menuList = ['即时注单','下注历史','开奖结果','个人资讯','路珠','游戏规则','消息中心','修改密码','安全退出'];

            }
          }
        })
      }
      

    },
    //退出游戏
    closeGameFun(){
        var mymessage=confirm('您确定退出吗？');
                            
        if(mymessage==true){
            var clearInfo = window.localStorage.clear();
            top.location.href = top.location.href;
        }else{
          
          this.isGame = false;
          this.nowother = -1;
        }
    },
    //接收子组件的  开奖和90s
    openBetFun(){
      //更新账户信息
      console.log('--------更新账户信息------');
      this.creditInitFun();
    },
    //管理员对话
    adminFun(){

      var _this = this;
      if(window.localStorage.Authorizations){

          if(_this.settime){
            clearInterval(timers);
            _this.isShow = false;
            return;
          }

          if (timers) {
            clearInterval(timers);
            timers = null;
          }

          _this.$httpGet('/api/other/nc').then(response => {
                      
              if(response.status == 200){
                _this.dataInfo = response.data;

                if(response.data.chat){

                  _this.isShow = true;

                }

                timers = setInterval(() => {
                    _this.adminFun();
                }, 10 * 1000)
                  
              }

          });

      }

    },
    //发送消息
    sendFun(){
          
      var _this = this;

      _this.$httpPost('/api/other/addChat',{
        content: _this.content,
        to: _this.dataInfo.from,
      }).then(response => {
                
          if(response.status == 200){
            
            this.$vux.toast.text('发送成功','middle');
            this.settime = true;
            _this.isShow = false;  
          }

      });

    },
    //关闭对话弹框
    closeFun(){
      
      this.settime = true;
    },
    //可用额度 credit
    creditFun(){
      var _this = this;
                
      if(window.localStorage.Authorizations){

          if (timer) {
              clearInterval(timer);
              timer = null;
          }

          _this.$httpGet('/api/account/credit').then(response => {
              
              if(response.status == 200){

                  //判断 信用账户与现金账户
                  if(_this.authData.deal_type){
                    if(_this.authData.deal_type[0] == 1){  //现金

                      _this.userMoney = '现金余额：' + response.data.cash.toFixed(2);

                    }else if(_this.authData.deal_type[0] == 2){  //信用

                      _this.userMoney = '信用余额：' + response.data.quick.toFixed(2);

                    }
                  }

                  timer = setInterval(() => {
                      _this.creditFun();
                  }, 10 * 1000)
                  
              }

          });
          
      }

    },
    //今日输赢
    dayTotalFun(){
      var _this = this;
                
      if(window.localStorage.Authorizations){

          if (daytime) {
              clearInterval(daytime);
              daytime = null;
          }

          _this.$httpGet('/api/account/getallTotal').then(response => {
              
              if(response.status == 200){

                  _this.daytotal = response.data.total.toFixed(2);

                  daytime = setInterval(() => {
                      _this.dayTotalFun();
                  }, 10 * 1000)
                  
              }

          });

      }
    },
    creditInitFun(){
      var _this = this;
                
      if(window.localStorage.Authorizations){

          _this.$httpGet('/api/account/credit').then(response => {
              
              if(response.status == 200){

                  //判断 信用账户与现金账户
                  if(_this.authData.deal_type[0] == 1){  //现金

                    _this.userMoney = '现金余额：' + response.data.cash.toFixed(2);

                  }else if(_this.authData.deal_type[0] == 2){  //信用

                    _this.userMoney = '信用余额：' + response.data.quick.toFixed(2);

                  }
                  
              }

          });
          
          
      }

    },
    //接收子组件所发送的当前标题
    getTitFun(item){
      this.title = item;
    },
    //今日输赢
  },
  mounted(){
      this.init();  //用户  余额信息
      this.adminFun();  //系统对话
      this.creditFun();  //可用余额
      this.dayTotalFun();  //今日输赢
  },
  watch: {
    
  }
}
</script>

<style lang="less" scoped>
  .popup0 {
    padding-bottom:15px;
    height:200px;
  }
  .popup1 {
    width:100%;
    height:100%;
  }
  .popup2 {
    padding-bottom:15px;
    height:400px;
  }
  .position-vertical-demo {
    background-color: #ffe26d;
    color: #000;
    text-align: center;
    padding: 15px;
  }
  .position-horizontal-demo {
    position: relative;
    height: 100%;
    .vux-close {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(4);
      color: #000;
    }
  }

  .menu-left-box{
    background: #341509;
  }
  .menu-tit-box{
    background: #210b03;
    color: #a8938a;
    font-size: 18px;
    line-height: 45px;
    margin-bottom: -1.17647059em;
  }
  .menu-tit-pic{
    vertical-align: middle;
    margin-right: 2px;
  }
  .menu-main-box{
    width: 112px;
  }
  .menu-cell-link{
    height: 38px;
    font-size: 14px;
    background: #431c0e;
    color: #a8938a;
  }
  .menu-cell-link:before{
    border-top: 1px solid#4c2010;
  }
  .menu-list-box .weui-cells{
    margin: 0px;
  }

  .head-title{
    font-size: 16px;
    line-height: 43px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0 !important;
    color: #fff;
    flex: 8;
  }
  .menu-switch,.game-close,.game-home{
    flex: 1;
  }
  .menu-switch>p,.game-close>p,.game-home>p{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #6b250b;
    box-shadow: 0px 1px 0px 0px #c06826;
    margin: 0px auto;
  }
  .menu-switch>p>img{
    margin: 10px 0px 0px 8px;
  }
  .game-close>p>img,.game-home>p>img{
    margin: 7px 0px 0px 7px;
  }
  header,footer{
    background: url(../assets/images/topBg.gif) repeat-x;
    z-index: 1;
  }
  header{
    position: fixed;
    top: 0;
    width: 100%;
  }
  footer{
    line-height: 43px;
    color: #fff;
    padding: 0px 15px;
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  .maincontent{
    padding: 43px 0px;
  }
  .dialogTitle{
    text-align: center;
    padding: 15px 0px 8px;
    margin: 0px;
  }
  
</style>
<style>
  .vux-tap-active:active{
    background-color: #431c0e!important;
  }
  /* .weui-cells:after{
    border-bottom: 1px solid #250d04!important;
  }
  .weui-cell_access .weui-cell__ft:after{
    border-color: #341509!important;
  } */
  /* .menu-list-box .weui-cells{
    margin: 0px;
  } */
  .weui-grid__icon{
      width: 80px!important;
      height: 80px!important;
  }
</style>